import React from "react";
import Editor from "@monaco-editor/react";
import { Step } from '../types';
import '../utils/monaco';

interface StepItemProps {
  step: Step;
  index: number;
  loading: boolean;
  onRemoveStep: (index: number) => void;
  onStartSingleStep: (step: Step, index: number) => void;
  onUpdateStep: (index: number, field: string, value: string) => void;
  onStartElementPicker: (stepIndex: number) => void;
}

const StepItem: React.FC<StepItemProps> = ({
  step,
  index,
  loading,
  onRemoveStep,
  onStartSingleStep,
  onUpdateStep,
  onStartElementPicker,
}) => {
  return (
    <div className="step-item">
      <div className="step-header">
        <h4>步骤 {index + 1}</h4>
        <div className="step-actions">
          <button
            className="btn btn-remove"
            onClick={() => onRemoveStep(index)}
          >
            🗑️
          </button>
          <button
            className="btn btn-start"
            onClick={() => onStartSingleStep(step, index)}
            disabled={loading}
          >
            {loading ? <div className="loading"></div> : "▶️"} 启动
          </button>
        </div>
      </div>

      <div className="step-config">
        <div className="config-row">
          <label>元素选择器:</label>
          <div className="flex gap-2">
            <input
              type="text"
              value={step.element}
              onChange={(e) => onUpdateStep(index, "element", e.target.value)}
              placeholder="留空可自动获取选中元素，或手动输入: .button, #header, [data-id='test']"
              className="flex-1"
            />
            <button
              onClick={() => onStartElementPicker(index)}
              className="btn btn-select"
              title="点击页面元素来选择"
            >
              选择元素
            </button>
          </div>
        </div>

        <div className="config-row">
          <label>标题:</label>
          <input
            type="text"
            value={step.popover.title}
            onChange={(e) =>
              onUpdateStep(index, "popover.title", e.target.value)
            }
            placeholder="引导标题"
          />
        </div>

        <div className="config-row">
          <label>描述:</label>
          <textarea
            value={step.popover.description}
            onChange={(e) =>
              onUpdateStep(index, "popover.description", e.target.value)
            }
            placeholder="引导描述内容"
            rows={2}
          />
        </div>

        <div className="config-row-group">
          <div className="config-row">
            <label>位置:</label>
            <select
              value={step.popover.side}
              onChange={(e) =>
                onUpdateStep(index, "popover.side", e.target.value)
              }
            >
              <option value="top">上方</option>
              <option value="bottom">下方</option>
              <option value="left">左侧</option>
              <option value="right">右侧</option>
            </select>
          </div>

          <div className="config-row">
            <label>对齐:</label>
            <select
              value={step.popover.align}
              onChange={(e) =>
                onUpdateStep(index, "popover.align", e.target.value)
              }
            >
              <option value="start">开始</option>
              <option value="center">居中</option>
              <option value="end">结束</option>
            </select>
          </div>
        </div>

        <div className="config-row">
          <label>自定义样式:</label>
          <div className="monaco-editor-container">
            <Editor
              height="120px"
              language="css"
              value={step.customStyles || ""}
              onChange={(value) =>
                onUpdateStep(index, "customStyles", value || "")
              }
              options={{
                minimap: { enabled: false },
                scrollBeyondLastLine: false,
                fontSize: 12,
                lineNumbers: "off",
                roundedSelection: false,
                scrollbar: {
                  vertical: "auto",
                  horizontal: "auto",
                },
                wordWrap: "on",
                automaticLayout: true,
                tabSize: 2,
                insertSpaces: true,
                suggest: {
                  showKeywords: true,
                  showSnippets: true,
                  showColors: true,
                  showFunctions: true,
                  showProperties: true,
                  showValues: true,
                },
                quickSuggestions: {
                  other: true,
                  comments: true,
                  strings: true,
                },
                acceptSuggestionOnCommitCharacter: true,
                acceptSuggestionOnEnter: "on",
                accessibilitySupport: "auto",
              }}
              theme="vs"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default StepItem;
